<template>
    <div class="app-container">
        <MmvTitle title="订单信息"></MmvTitle>
        <el-form label-width="100px" label-position="right">
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="订单编号">{{detail.orderInfo.orderNo}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="订单状态">
                        <dict-tag :options="dict.type.sys_order_status" :value="detail.orderInfo.orderStatus" />
                        <!-- {{detail.orderInfo.orderStatus}} -->
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="订单类型">{{detail.orderInfo.takeStoreName}}</el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <el-form-item label="取车类型">
                        {{  {
                                1: '到店取还车',
                                3: '上门送取车',
                                4: '上门送车',
                                5: '上门取车',
                            }[Number(detail.orderInfo.rentalType)]
                        }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="取车门店">{{detail.orderInfo.takeStoreName}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="还车门店">{{detail.orderInfo.alsoStoreName}}</el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="预定车辆">{{detail.orderInfo.xxxxx}}</el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <!-- <el-form-item label="取车时间">{{detail.orderInfo.actualStartTime}}</el-form-item> -->
                    <el-form-item label="取车时间">{{detail.orderInfo.rentalStartTime}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <!-- <el-form-item label="还车时间">{{detail.orderInfo.actualEndTime}}</el-form-item> -->
                    <el-form-item label="还车时间">{{detail.orderInfo.rentalEndTime}}</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="租期（天）">{{detail.orderInfo.leaseDays}}</el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <MmvTitle title="车辆信息"></MmvTitle>
        <el-form label-width="100px" label-position="right">
            <el-row :gutter="15">
                <el-col :span="12">
                    <el-form-item label="分配车辆">{{detail.carInfo.modelName || '--'}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车牌号">{{detail.carInfo.carNo || '--'}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车架号">{{detail.carInfo.vinNo || '--'}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="发动机号">{{detail.carInfo.engineNo || '--'}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="能源形式">
                        <dict-tag :options="dict.type.style_model" :value="detail.carInfo.styleModel" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="燃油类型">
                        <dict-tag :options="dict.type.fuel_type" :value="detail.carInfo.fuelType" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="变速箱">
                        <dict-tag :options="dict.type.speed_changing_box" :value="detail.carInfo.speedChangingBox" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="座位数">
                     <dict-tag :options="dict.type.seat" :value="detail.carInfo.seating" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排量">
                        <dict-tag :options="dict.type.displacement" :value="detail.carInfo.displacement" />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="24">
                    <el-form-item label="车辆颜色">{{detail.carInfo.xxxxxx}}</el-form-item>
                </el-col> -->
            </el-row>
        </el-form>
        <MmvTitle title="客户信息"></MmvTitle>
        <el-form label-width="130px" label-position="right">
            <el-row :gutter="15">
                <!-- <el-col :span="12">
                    <el-form-item label="客户类型">{{detail.customerInfo.memberNo || '--'}}</el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <el-form-item label="客户类型">{{detail.customerInfo.memberType|memberType}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户名称">{{detail.customerInfo.memberName || '--'}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户来源">{{detail.customerInfo.memberSource|memberSource}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系方式">{{detail.customerInfo.contactPhone || '--'}}</el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="联系地址">{{detail.customerInfo.contactAddress || '--'}}</el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="证件号码">{{detail.customerInfo.cardId || '--'}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="失效日期">{{detail.customerInfo.cardValidity || '--'}}</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="证件正反面">
                        <template v-for="item in detail.customerInfo.sfUrl">
                            <el-image :key="item" :src="item|imageUrl" :preview-src-list="[$mmvImageUrl(item)]" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="驾驶证类型">{{detail.customerInfo.drivingType || '--'}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="失效日期">{{detail.customerInfo.drivingValidity || '--'}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="驾驶证正副页">
                        <template v-for="item in detail.customerInfo.jsUrl">
                            <el-image :key="item" :src="item|imageUrl" :preview-src-list="[$mmvImageUrl(item)]" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="detail.customerInfo.creditCode">
                    <el-form-item label="统一社会信用代码">{{detail.customerInfo.creditCode||"--"}}</el-form-item>
                </el-col>
                <el-col :span="24" v-if="detail.customerInfo.businessLicenseUrl">
                    <el-form-item label="营业执照">
                        <el-image :src="detail.customerInfo.businessLicenseUrl|imageUrl" :preview-src-list="[$mmvImageUrl(item)]" style="width:160px;height:90px;margin-right:15px;"></el-image>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template v-if="false">
            <MmvTitle title="交车验车单"></MmvTitle>
            <el-form label-width="100px" label-position="right">
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="车身照片">
                            <template v-for="(item,index) in detail.carInspection.bodyImage">
                                <el-image :src="item|imageUrl" :key="index" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="仪表盘/油表">
                            <template v-for="(item,index) in detail.carInspection.panelImage">
                                <el-image :src="item|imageUrl" :key="index" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="内饰照片">
                            <template v-for="(item,index) in detail.carInspection.interiorImage">
                                <el-image :src="item|imageUrl" :key="index" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="车辆划痕">
                            <template v-for="(item,index) in detail.carInspection.scratchImage">
                                <el-image :src="item|imageUrl" :key="index" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车辆油量">{{detail.carInspection.fuelCapacity}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车辆公里数">{{detail.carInspection.vehicleMileage}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="车辆随车物品">{{detail.carInspection.accessoryItems}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="其他描述">{{detail.carInspection.remark}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="取车时间">{{detail.carInspection.takeAlsoTime}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="处理人">{{detail.carInspection.conductor}}</el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                    <el-form-item label="备注">{{detail.carInspection.xxxxxx}}</el-form-item>
                </el-col> -->
                    <el-col :span="24">
                        <el-form-item label="客户签名">
                            <template v-for="(item,index) in detail.carInspection.signImage">
                                <el-image :src="item|imageUrl" :key="index" style="width:160px;height:90px;margin-right:15px;"></el-image>
                            </template>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
        <!-- <template v-if="detail.alsoCarCheck"> -->
        <template v-if="false">
            <MmvTitle title="还车验车单"></MmvTitle>
            <el-form label-width="100px" label-position="right">
                <el-row :gutter="15">
                    <el-col :span="24" v-if="detail.alsoCarCheck.bodyImage">
                        <el-form-item label="车身照片">
                            <template v-for="(item,index) in detail.alsoCarCheck.bodyImage">
                                <el-image :src="item|imageUrl" :key="index" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="detail.alsoCarCheck.panelImage">
                        <el-form-item label="仪表盘/油表">
                            <template v-for="(item,index) in detail.alsoCarCheck.panelImage">
                                <el-image :src="item|imageUrl" :key="index" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="detail.alsoCarCheck.interiorImage">
                        <el-form-item label="内饰照片">
                            <template v-for="(item,index) in detail.alsoCarCheck.interiorImage">
                                <el-image :src="item|imageUrl" :key="index" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="detail.alsoCarCheck.scratchImage">
                        <el-form-item label="车辆划痕">
                            <template v-for="(item,index) in detail.alsoCarCheck.scratchImage">
                                <el-image :src="item|imageUrl" :key="index" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车辆油量">{{detail.alsoCarCheck.fuelCapacity}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车辆公里数">{{detail.alsoCarCheck.vehicleMileage}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="车辆随车物品">{{detail.alsoCarCheck.accessoryItems}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="其他描述">{{detail.alsoCarCheck.remark}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="取车时间">{{detail.alsoCarCheck.takeAlsoTime}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="处理人">{{detail.alsoCarCheck.conductor}}</el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                    <el-form-item label="备注">{{detail.alsoCarCheck.xxxxxx}}</el-form-item>
                </el-col> -->
                    <el-col :span="24">
                        <el-form-item label="客户签名">
                            <template v-for="(item,index) in detail.alsoCarCheck.signImage">
                                <el-image :src="item" :key="index" style="width:160px;height:90px;margin-right:15px;"></el-image>
                            </template>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
        <!-- 未实现 -->
        <template v-if="false">
            <MmvTitle title="押金结算"></MmvTitle>
            <el-form label-width="100px" label-position="right">
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="押金金额"></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="退款金额"></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="扣款原因"></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="扣款方式"></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="扣款金额"></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="补充金额"></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="车损照片"></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="维修单据"></el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
        <!-- 未实现 -->
        <template v-if="false">
            <MmvTitle title="违章结算"></MmvTitle>
            <el-form label-width="100px" label-position="right">
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="违章押金金额"></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="退款金额"></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="扣款方式"></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="违章时间"></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="违章城市"></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="违章扣分"></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="违章详细地址"></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注"></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="补充金额"></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="违章单据"></el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
    </div>
</template>

<script>
import * as api from '@/api/luxuryOrder/index';
import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
import * as uilts from '@/utils/index'

export default {
    components: {
        MmvTitle,
    },
    props: ['orderNo'],
    filters: {
        memberType(val) {
            return {
                1: '企业',
                2: '个人',
            }[Number(val)] || '';
        },
        memberSource(val) {
            return {
                1: '搜索',
                2: '分享',
                3: '扫码',
                4: '手动录入',
            }[Number(val)] || '';
        },
        imageUrl(url) {
            return process.env.VUE_APP_BASE_IMAGE_URL + url
        },
    },
    dicts: ['memberType', 'sys_order_source', 'sys_order_status', 'style_model', 'fuel_type', 'speed_changing_box','seat','displacement'],
    data() {
        return {
            detail: {
                "orderInfo": {//订单信息
                    "orderNo": '', //  "05055c045ad744799ee12ac0f3f41050",//订单编号
                    "orderStatus": '', //  11,//订单状态
                    "rentalType": '', //  null,//取车类型
                    "takeStoreName": '', //  "北广场自助点",//取车门店
                    "alsoStoreName": '', //  "北广场自助点",//还车门店
                    "actualStartTime": '', //  null,//实际取车时间
                    "actualEndTime": '', //  null,//实际还车时间
                    "leaseDays": '', //  2//租赁天数
                },
                "carInfo": {//车辆信息
                    "modelName": '', //  "风骏5",//预定品牌/车系/车型
                    "carNo": '', //  null,//车牌号
                    "vinNo": '', //  null,//车架号
                    "engineNo": '', //  null,//发动机号
                    "styleModel": '', //  null,//能源形式
                    "fuelType": '', //  null,//燃油类型
                    "speedChangingBox": '', //  null,//变速箱
                    "seating": '', //  null,//座位数
                    "displacement": '', //  null//排量
                },
                "customerInfo": {//客户信息
                    "memberNo": '', //  "M16462134546695155",//客户编号
                    "memberType": '', //  2,//客户类型
                    "memberName": '', //  "代元宝",//客户名称/企业名称
                    "memberSource": '', //  4,//客户来源
                    "contactPhone": '', //  "13892006829",//联系电话
                    "contactAddress": '', //  "陕西省西安市碑林区",//联系地址 /企业地址
                    "cardId": '', //  "610423198901224412",//证件号
                    "cardValidity": '', //  "2026-01-01",//证件有效期
                    "sfUrl": [], //证件图片
                    "drivingId": '', // "610423198901224412",//驾驶证编号
                    "drivingType": '', // "c1",//驾驶证类型
                    "drivingValidity": '', // "2026-01-01",//驾驶证有效期
                    "jsUrl": [],//驾驶证图片
                    "businessLicenseUrl": null,//营业执照
                    "creditCode": null //统一社会信用代码
                },
                "carInspection": {//交车验车单
                    "id": '', //  "05055c045ad744799ee12ac0f3f41051",
                    "fuelCapacity": '', //  1.0,//车辆油量
                    "vehicleMileage": '', //  1.0,//公里数
                    "accessoryItems": '', //  null,//车辆随车物品(逗号隔开)
                    "remark": '', //  null,//其他描述
                    "takeAlsoTime": '', //  null,//取车时间
                    "conductor": '', //  "张三",//处理人
                    "bodyImage": [], //  null,//车身照片
                    "panelImage": [], //  null,//仪表盘
                    "interiorImage": [], //  null,//内饰照片
                    "scratchImage": [], //  null,//车辆划痕
                    "signImage": [], //  null//客户签名
                },
                "alsoCarCheck": {//还车验车单
                    "id": '', //  "05055c045ad744799ee12ac0f3f41051",
                    "fuelCapacity": '', //  1.0,//车辆油量
                    "vehicleMileage": '', //  1.0,//公里数
                    "accessoryItems": '', //  null,//车辆随车物品(逗号隔开)
                    "remark": '', //  null,//其他描述
                    "takeAlsoTime": '', //  null,//还车时间
                    "conductor": '', //  "张三",//处理人
                    "lkosten": '', //  null,//补充油费(还车验车)
                    "bodyImage": [], //  null,//车身照片
                    "panelImage": [], //  null,//仪表盘
                    "interiorImage": [], //  null,//内饰照片
                    "scratchImage": [], //  null,//车辆划痕
                    "signImage": [], //  null//客户签名
                }
            },
        }
    },
    created() {
        this.getData();
    },
    methods: {
        uilts: uilts,
        getData() {
            api.detail(this.orderNo).then(response => {
                console.log(response)
                // this.detail = response.data || {};
                this.detail.orderInfo = response.data.orderInfo || {};
                this.detail.customerInfo = response.data.customerInfo || {};
                this.detail.carInfo = response.data.carInfo || {};
                this.detail.alsoCarCheck = response.data.alsoCarCheck || {};
                this.detail.carInspection = response.data.carInspection || {};
                this.detail.alsoCarCheck = response.data.alsoCarCheck || {};
            });
        },
    },
}
</script>
